<template>
  <div class="component-plan">
		<div class="plan-content plan-class1" v-if="plan == 1">
			<div class="plaanclass-line1">
				<div class="header-pic"><i class="el-icon-user-solid"></i></div>
				<span class="plan-content-title">弹窗运营计划</span>
				<span class="tag">触发</span>
			</div>
			<p class="planclass-line2">
				<span>创建时间</span>
				<span>2021-08-23 12:28</span>
			</p>
			<p class="planclass-line3">暂无数据，计划暂未审批</p>
		</div>
		<div class="plan-content plan-class2" v-else-if="plan == 2">
			<div class="plaanclass-line1">
				<div class="header-pic"><i class="el-icon-user-solid"></i></div>
				<span class="plan-content-title">弹窗运营计划</span>
				<span class="tag">触发</span>
			</div>
			<p class="trigger-time">
				<span>最近触发日期</span>
				<span>2021-10-29</span>
			</p>
			<div class="statics-chart">
				<div class="statics">
					<p>13.00%</p>
					<p>目标完成率</p>
					<p>
						<span>比前一天</span>
						<span :class="{greenFont: true}"><i class="el-icon-caret-top"></i>+1.00%</span>
					</p>
				</div>
				<div class="chart">
					
				</div>
			</div>
			<div class="base-static">
				<p>整体目标完成率</p>
				<p>
					<span>策略组 11.62%</span>
					<span>对照组 7.43%</span>
				</p>
			</div>
		</div>
		<div class="plan-content plan-class3" v-else-if="plan == 3">
			<div class="plaanclass-line1">
				<div class="header-pic"><i class="el-icon-user-solid"></i></div>
				<span class="plan-content-title">弹窗运营计划</span>
				<span class="tag">触发</span>
			</div>
			<p class="trigger-time">
				<span>最近触发日期</span>
				<span>2021-10-29</span>
			</p>
			<div class="trigger-content">
				<p class="pepeo-count trigger-flex" >
					<span>触发人次</span>
					<span>55266</span>
				</p>
				<p class="trigger-flex">
					<span>策略组完成率</span>
					<el-progress :percentage="60" color="#F5B126" class="el-progress-width"></el-progress>
				</p>
				<p class="trigger-flex"> 
					<span>对照组完成率</span>
					<el-progress :percentage="50" color="#F5B126" class="el-progress-width"></el-progress>
				</p>
			</div>
		</div>
		<div class="plan-content plan-calss4" v-else>
			{{plan}}
		</div>
  </div>
</template>
<style>

</style>
<script>

export default {
  name: "plan",
	props:{
		plan:{
			required: true,
		}
	},
  data() {
    return {
			
    }
  },
  created() {
		// console.log(this.plan);
  },
  methods: {

  }

};

</script>
<style lang="scss">
.group-body{
	box-sizing: border-box;
	height: calc(100% - 98px);
	overflow-y: scroll;
	.plan-content{
		height: 120px;
		background-color: #FFFFFF;
		margin-bottom: 10px;
		width: 100%;
		border-radius: 4px;
		box-shadow: 0 3px 7px 0 rgb(192 204 218 / 24%);
		padding: 9px 17px 10px 16px;
		.plaanclass-line1{
			color: #475669;
			font-size: 16px;
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 8px;
			.header-pic{
				width: 16px;
				color: #F5B126;
				margin-right: 6px;
				font-size: 14px;
			}
			.plan-content-title{
				flex-grow: 1;
			}
			.tag{
				padding: 2px 4px;
				font-size: 10px;
				color: #8492a6;
				background-color: #F0F5F8;
			}
		}
	}
	
	.plan-class1{
		height: 92px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.planclass-line2{
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #8492a6;
		}
		.planclass-line3{
			font-size: 12px;
			color: #8492a6;
		}
	}
	.plan-class2{
		height: unset;
		font-size: 12px;
		color: #8492a6;
		.trigger-time{
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 17px;
			line-height: 17px;
			margin-top: 8px;
		}
		.statics-chart{
			display: flex;
			width: calc(100% + 32px);
			margin-left: -15px;
			box-sizing: border-box;
			padding: 8px 15px ;
			box-shadow: 0 3px 7px 0 rgb(192 204 218 / 24%);
			.statics{
				height: 90px;
				width: 137px;	
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				&>p:first-child{
					font-size: 30px;
					font-family: Roboto-Medium;
					font-weight: 500;
					color: #475669;
					line-height: 35px;
				}
				.greenFont{
					color: #00BF8A;
				}
			}
			.chart{
				height: 90px;
				width: calc(100% - 137px);
				// background-color: gray;
			}
		}
		.base-static{
			margin-top: 10px;
			&>p:nth-child(2){
				padding-top: 8px;
				font-size: 12px;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				color: #5e6d82;
				line-height: 17px;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.plan-class3{
		height: unset;
		font-size: 12px;
		color: #8492a6;
		.trigger-time{
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 17px;
			line-height: 17px;
			margin-top: 8px;
		}
		.trigger-content{
				width: 100%;
			.pepeo-count{
				display: flex;
			}
			.trigger-flex{
				justify-content: space-between;
				width: 100%;
				display: flex;
				margin-top: 8px;
				.el-progress-width{
					flex-grow: 1;
					margin-left: 28px;
					.el-progress-bar{
						margin-right: -35px;
						padding-right: 33px;
					}
					.el-progress__text{
						font-size: 10px !important;
					}
				}
			}
		}
	}
}
</style>
